<template>
  <div class="outer" ref="container" @scroll="handleScroll">
    <Recommend :list="moreList" title="" />
    <div v-if="isShow" class="nomore">客官您歇会儿~~~没有更多啦！！！</div>
  </div>
</template>

<script setup lang="ts">
import { reqMoreGoods } from '@/api';
import { onMounted, ref } from 'vue';
import Recommend from './recommend.vue';
import type { records } from '../types/index'
const page = ref<number>(1)
const limit = ref<number>(10)
const moreList = ref<records>([])
const container = ref()
const total = ref<number>(0)
const isShow = ref<boolean>(false)
const handleScroll = () => {
  //滚动元素的总高度
  //  console.log()
  //滚动条的滚动距离+可是高度的总距离
  const totalHeight = container.value.scrollHeight
  const val = container.value.offsetHeight + container.value.scrollTop
  if (totalHeight === Math.ceil(val)) {
    if (total.value === moreList.value.length) {
      isShow.value = true
      return
    }
    page.value = page.value + 1
    getMoreList()
  }
}
const getMoreList = async () => {
  const res = await reqMoreGoods(page.value, limit.value)
  total.value = res.data.total
  moreList.value.push(...res.data.records)
}

onMounted(() => {
  getMoreList()
})

</script>

<style scoped>
.outer {
  padding: 8px;
  height: 100vh;
  overflow: scroll;

  .nomore {
    font-size: 16px;
    color: #ff5f34;
    text-align: center;
  }
}
</style>